<script setup lang="ts">
import type { VNDB, VNDBResponse } from '../utils/VNDB'

const { locale } = useI18n()
const introductionLanguage = ref(locale.value as Language)
const isSuccess = ref(false)
const isFetching = ref(false)

const data = ref<VNDB>({
  title: '',
  titles: [],
  description: '',
  aliases: []
})

const { vndbId, name, introduction, aliases } = storeToRefs(
  usePersistEditGalgameStore()
)

const handleGetVNData = async () => {
  if (!VNDBPattern.test(vndbId.value)) {
    useMessage(10501, 'warn')
    return
  }

  const isDuplicate = await $fetch('/api/galgame/check', {
    method: 'GET',
    query: { vndbId: vndbId.value },
    ...kungalgameResponseHandler
  })
  if (!isDuplicate) {
    return
  }

  if (isFetching.value) {
    return
  } else {
    isFetching.value = true
    useMessage(10502, 'info')
  }

  const vndbData = await $fetch<VNDBResponse>(`https://api.vndb.org/kana/vn`, {
    method: 'POST',
    body: {
      filters: ['id', '=', vndbId.value],
      fields: 'title, titles.title, description, aliases'
    }
  })

  if (vndbData) {
    if (!vndbData.results.length) {
      isFetching.value = false
      useMessage(10503, 'error')
      return
    }

    isFetching.value = false
    useMessage(10504, 'info')

    data.value = vndbData.results[0]
    name.value['en-us'] = data.value.title
    introduction.value['en-us'] = data.value.description ?? ''
    aliases.value = data.value.aliases

    // For reactivity
    if (introductionLanguage.value !== 'en-us') {
      introductionLanguage.value = 'en-us'
    } else {
      isSuccess.value = !isSuccess.value
    }
  }
}
</script>

<template>
  <div class="container">
    <EditGalgameHelp />

    <KunDivider margin="50px 0">
      <span class="divider">{{ $t('edit.galgame.essential') }}</span>
    </KunDivider>

    <KunHeader :size="2" :show-help="true">
      <template #header>{{ $t('edit.galgame.vndb.name') }}</template>

      <template #help>{{ $t('edit.galgame.vndb.help') }}</template>
    </KunHeader>

    <div class="vndb">
      <KunInput
        v-model="vndbId"
        :placeholder="$t('edit.galgame.vndb.placeholder')"
      />
      <KunButton @click="handleGetVNData">
        {{ $t('edit.galgame.vndb.fetch') }}
      </KunButton>
    </div>
    <p class="info">{{ $t('edit.galgame.vndb.info') }}</p>

    <EditGalgameTitle :titles="data.titles">
      <KunInput
        :placeholder="$t('edit.galgame.introduction.en-us')"
        v-model="name['en-us']"
      />
      <KunInput
        :placeholder="$t('edit.galgame.introduction.ja-jp')"
        v-model="name['ja-jp']"
      />
      <KunInput
        :placeholder="$t('edit.galgame.introduction.zh-cn')"
        v-model="name['zh-cn']"
      />
      <KunInput
        :placeholder="$t('edit.galgame.introduction.zh-tw')"
        v-model="name['zh-tw']"
      />
    </EditGalgameTitle>

    <EditGalgameIntroduction
      :introduction-language="introductionLanguage"
      type="publish"
      :is-success="isSuccess"
      @set="(value) => (introductionLanguage = value as Language)"
    />

    <EditGalgameBanner />

    <EditGalgameFooter />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 17px;

  @include kun-blur;
}

:deep(h2) {
  margin-bottom: 17px;

  .icon {
    font-size: large;
    margin-left: 10px;
  }
}

.divider {
  padding: 0 17px;
}

.vndb {
  display: flex;
  margin-bottom: 17px;

  input {
    margin-right: 17px;
  }
}

.info {
  color: var(--kungalgame-font-color-0);
  font-size: small;
  font-style: oblique;
  margin-bottom: 17px;
}

.titles {
  display: flex;
  flex-direction: column;

  input {
    margin-bottom: 7px;
  }
}
</style>
